<template>
  <div class="wrap">
    <!-- main begin-->
    <el-header>
      <el-row>
        <el-col :span="12">
          <h1>在线拍卖系统</h1>
        </el-col>
        <el-col :span="12" class="align-right">
          <el-button type="text" @click="logout">注销</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-form :model="numberValidateForm" ref="numberValidateForm" inline class="demo-ruleForm"  size="mini">
      <el-form-item label="" prop="AuctionName">
        <el-input v-model.number="numberValidateForm.auctionName" placeholder="名称" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="" prop="AuctionDesc">
        <el-input v-model.number="numberValidateForm.auctionDesc" placeholder="描述" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="" prop="AuctionStartTime">
        <el-input v-model="numberValidateForm.auctionStartTime" placeholder="开始时间" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="" prop="AuctionEndTime">
        <el-input v-model="numberValidateForm.auctionEndTime" placeholder="结束时间" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="" prop="AuctionUpset">
        <el-input v-model.number="numberValidateForm.auctionUpset" placeholder="起拍价" size="mini"></el-input>
      </el-form-item>
      <el-form-item >
        <el-button type="primary" @click="submitForm('numberValidateForm')">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col v-if="user.userIsAdmin === 1" :span="12">
        <el-button type="info" size="mini"><router-link to="/insert" style="color: white">发布</router-link></el-button>
        <el-button type="info" size="mini"><router-link to="/result" style="color: white">竞拍结果</router-link></el-button>
      </el-col>
    </el-row>
    <div >
      <el-table
          :data="tableData"
          stripe
          style="width: 100%">
        <el-table-column
            align="center"
            prop="auctionName"
            label="名称"
            width="180">
        </el-table-column>
        <el-table-column
            align="center"
            prop="auctionDesc"
            label="描述"
            width="180">
        </el-table-column>
        <el-table-column
            align="center"
            prop="auctionStartTime"
            label="开始时间">
        </el-table-column>
        <el-table-column
            align="center"
            prop="auctionEndTime"
            label="结束时间">
        </el-table-column>
        <el-table-column
            align="center"
            prop="auctionUpset"
            label="起拍价">
        </el-table-column>
        <el-table-column
            align="center"
            label="操作">
          <template slot-scope="scope">
      <span v-if="user.userIsAdmin === 1">
        <router-link :to="{ path: '/update', query: { auctionId: scope.row.auctionId } }">修改</router-link>&nbsp;
        <a href="#" @click="deletes(scope.row.auctionId)">删除</a>
      </span>
            <span v-else>
        <router-link :to="{ path: '/auction', query: { auctionId: scope.row.auctionId } }">竞拍</router-link>
      </span>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin: auto;text-align: center;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="pageIndex" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      user: localStorage.getItem("honey-user") ? JSON.parse(localStorage.getItem("honey-user")) : {},
      numberValidateForm: {
        auctionId: '',
        auctionName: '',
        auctionDesc: '',
        auctionStartTime: '',
        auctionEndTime: '',
        auctionUpset: ''
      },
      pageIndex: 1,
      pageSize: 5,
      tableData: [],  // 确保 tableData 是一个数组
      total: 0  // 用于存储总记录数
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.changepages();
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.changepages();
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.changepages();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    changepages() {
      const params = {
        ...this.numberValidateForm,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      };
      request.get("/selectPage", { params }).then((res) => {
        console.log(res);
        this.tableData = res.records;
        this.total = res.total;
      }).catch((error) => {
        console.error("API调用失败：", error);
      });
    },

    logout() {
      localStorage.removeItem("honey-user");
      this.$router.push("/");
      this.$message.success('退出成功');
    },
    deletes(auctionId) {
      this.$confirm(
          "此操作将永久删除该列, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
      )
          .then(() => {
            request
                .delete(`/delete/${auctionId}`)
                .then(() => {
                  this.$message({
                    type: "success",
                    message: "删除成功!",
                  });
                  // 重新加载数据
                  this.changepages();
                })
                .catch((error) => {
                  console.error("删除失败:", error);
                  this.$message({
                    type: "error",
                    message: "删除失败!",
                  });
                });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
    }
  },
  created() {
    this.changepages();
  }
}
</script>

<style>
/* 可根据需要添加样式 */
</style>